<script setup>
import { ref, reactive, toRaw } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import CommonTable from '@/components/myTable/indexView.vue'
import DialogModal from './dialogModalView.vue'
const formRef = ref()
const currentData = ref({})

const formState = reactive({
  id: '',
  name: '',
  type: 1,
  status: undefined,
})
const statusList = ref([
  {
    value: '1',
    label: '通过',
  },
  {
    value: '2',
    label: '审核失败',
  },
  {
    value: '3',
    label: '已撤回',
  },
  {
    value: '4',
    label: '审核中',
  },
])

const columns = [
  {
    title: '用户ID',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    resizable: true,
    // maxWidth: 200,
    // minWidth: 75,
    width: 100,
    sorter: false,
  },
  {
    title: '游戏名称',
    width: 100,
    dataIndex: 'age',
    align: 'center',
    key: 'age',
  },
  {
    title: '反馈时间',
    dataIndex: 'dataList',
    align: 'center',
    key: 'tags',
    width: 100,
  },
  {
    title: '反馈类型',
    align: 'center',
    dataIndex: 'status',
    key: '2',
    width: 100,
  },
  {
    title: '问题描述',
    dataIndex: 'image',
    align: 'center',
    key: '3',
    width: 140,
  },
  {
    title: '反馈信息',
    align: 'center',
    dataIndex: 'address',
    key: '4',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'action',
    align: 'center',
    // maxWidth: 200,
    minWidth: 75,
    width: 100,
    sorter: false,
  },
]

const dataSource = ref(
  Array.from({ length: 100 }, (_, i) => ({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `${i % 2 === 0 ? `London Park no. ${i}` : ''}`,
    status: `${i % 2 === 0 ? '2' : '4'}`,
    id: i,
    dataList: `2023/07/08 05:07:${i}`,
    tags: ['cool', 'teacher'],
  })),
)

const isLoading = ref(false)
const commonTable = ref(null)

const search = values => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState))
    })
    .catch(e => {
      console.log('e: ', e)
    })
  console.log(formState, 1111)
  console.log('Success:', values)
}

const reset = () => {
  console.log(111, 'reset')
  // formRef.value.resetFields()
  formState.id = ''
  formState.name = ''
  formState.type = 1
  formState.status = undefined
}
const getPageParams = (start, length) => {
  console.log('分页数据：', start, length)
}
const getTableSort = sorter => {
  if (sorter.order) {
    console.log(
      sorter.order === 'ascend' ? '升序' : '降序',
      '排序表头字段：',
      sorter.field,
    )
  } else {
    console.log('默认顺序----')
  }
  console.log('排序数据：', sorter)
}

const getSelectColumn = rows => {
  console.log('选择的数据：', rows)
}
const doAction = (action, row) => {
  if (action === 'views') {
    console.log('views: ', row)
    currentData.value = row // 示例数据
    dialogModal.value.open('add', row)
  } else if (action === 'edit') {
    console.log('edit: ', row)
    currentData.value = row // 示例数据
    dialogModal.value.open('edit', row)
  } else if (action === 'del') {
    console.log('del: ', row)
  } else if (action === 'cancel') {
    console.log('cancel: ', row)
  }
  console.log('action: ', action)
  console.log('row: ', row)
}

const dialogModal = ref(null)
</script>
<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">
            历史审核数据
            <ExclamationCircleOutlined />
          </div>
        </header>
      </template>
      <div class="seach-content">
        <a-form ref="formRef" :model="formState" layout="inline">
          <a-form-item label="游戏ID">
            <a-input
              size="small"
              v-model:value="formState.id"
              allowClear
              placeholder="请输入游戏ID"
              class="search_input"
            />
          </a-form-item>
          <a-form-item label="游戏名称">
            <a-input
              size="small"
              v-model:value="formState.name"
              allowClear
              placeholder="请输入游戏ID"
              class="search_input"
            />
          </a-form-item>
          <a-form-item label="审核类型">
            <a-radio-group v-model:value="formState.type">
              <a-radio :value="1">全部</a-radio>
              <a-radio :value="2">创建游戏</a-radio>
              <a-radio :value="3">更新资料</a-radio>
              <a-radio :value="4">上传安装包</a-radio>
              <a-radio :value="5">审核状态</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="审核状态">
            <a-select
              v-model:value="formState.status"
              placeholder="请选择审核状态"
              show-search
              allowClear
              :options="statusList"
              class="search_input"
              style="width: 200px"
            ></a-select>
          </a-form-item>
          <a-form-item>
            <div style="margin-top: 2px">
              <a-button
                class="search_Button confirm"
                type="primary"
                @click="search"
                >确定</a-button
              >
              <a-button
                class="search_Button search_Button_reset button_cancel_hover"
                @click="reset"
                >重置</a-button
              >
            </div>
          </a-form-item>
        </a-form>
      </div>
      <div class="table_content">
        <CommonTable
          ref="commonTable"
          :is-select="true"
          :columns="columns"
          :dataSource="dataSource"
          :total="dataSource.length"
          :isLoading="isLoading"
          :showHeader="true"
          @getPageParams="getPageParams"
          @get-table-sort="getTableSort"
          @getSelectColumn="getSelectColumn"
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a-tag
                :bordered="false"
                v-if="record.status !== '2'"
                @click="doAction('views', record)"
                class="doAction_style"
                >查看</a-tag
              >
              <span v-if="record.status === '2' || record.status === '3'">
                <a-tag
                  :bordered="false"
                  @click="doAction('edit', record)"
                  class="doAction_style"
                  >编辑</a-tag
                >
                <a-tag
                  :bordered="false"
                  @click="doAction('del', record)"
                  class="doAction_style"
                  >删除</a-tag
                >
              </span>
              <a-tag
                :bordered="false"
                v-if="record.status === '4'"
                @click="doAction('cancel', record)"
                class="doAction_style"
                >撤回</a-tag
              >
            </template>
            <template v-else-if="column.dataIndex === 'image'">
              <a-image
                :width="30"
                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
              />
              <!-- {{ record.address }} -->
            </template>
            <template v-else-if="column.dataIndex === 'address'">
              <span v-if="record.address">{{ record.address }}</span>
              <span v-else>-</span>
            </template>
            <template v-else-if="column.dataIndex === 'status'">
              <a-tag
                v-if="record.status === '1'"
                color="#4CC87E"
                :bordered="false"
                >审核成功</a-tag
              >
              <a-tag
                v-else-if="record.status === '2'"
                color="error"
                :bordered="false"
                >审核失败</a-tag
              >
              <a-tag v-else-if="record.status === '3'" :bordered="false"
                >已撤回</a-tag
              >
              <a-tag v-else color="warning" :bordered="false">审核中</a-tag>
            </template>
          </template>
        </CommonTable>
      </div>
    </a-card>
    <DialogModal ref="dialogModal" :name="`历史审核数据`" />
  </div>
</template>
<style lang="less" scoped>
@import url('./index.less');
</style>
<style lang="less" scoped>
.doAction_style {
  color: #4cc87e;
  cursor: pointer;
}
</style>
